<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>酒店列表</title>
  <!-- 引入样式 -->
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
</head>
<body>
<h1 align="center">酒店管理系统</h1>
<fieldset class="layui-elem-field layui-field-title">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" id="searchForm" method="post">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" >酒店名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
           <a class="layui-btn search_btn" id="doSearch">查询</a>
        <button type="reset" class="layui-btn layui-btn-warm">清空</button>
        </div>
    </div>
</form>
<!-- 表格 -->
<table id="roomList" lay-filter="roomList"></table>
<!--表格工具条-->
<div  style="display: none;" id="tableToolBar">
	<a class="layui-btn layui-btn layui-btn" lay-event="add">添加</a>
</div>
<!--操作-->
<div   style="display: none;" id="roomListBar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</div>

<!-- 添加房间 -->
<div id="dataFrmContent" style="padding: 10px;display: none;" >
	<form class="layui-form" method="post" id="dataFrm" lay-filter="dataFrm" >
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">酒店</label>
		      <div class="layui-input-inline">
		      	<input type="hidden" name="id">
		         <select name="hotelid" id="hotelid" lay-filter="hotelid"  lay-verify="required" >
                 	<option value="">请选择酒店</option>
			     </select>
		      </div>
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">房间价格</label>
		      <div class="layui-input-inline">
		      	<input type="hidden" name="id">
		        <input type="number" name="price" lay-verify="required|number" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		 </div>
		<div class="layui-form-item">
			<label class="layui-form-label">房间类型</label>
			<div class="layui-input-block">
				<input type="radio" name="type" value="1" title="标准间" checked="">
				<input type="radio" name="type" value="2" title="豪华间">
				<input type="radio" name="type" value="3" title="总统套房">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">房间备注</label>
			<div class="layui-input-block">
				 <textarea placeholder="请输入备注" name="info" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item" style="text-align: center;">
			<button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			<button type="reset" class="layui-btn layui-btn-warm">重置</button>
		</div>
	</form>
</div>

</body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form','layer','table','laydate'],function(){
    var form = layui.form,
        layer = layui.layer,
        $ = layui.jquery,
        laydate=layui.laydate,
        table = layui.table;
    //退货列表
    var tableIns = table.render({
        elem: '#roomList',
        url : '/room/loadAllRoom',
        cellMinWidth : 95,
        toolbar: '#tableToolBar',
        page : true,
        height : "350px",
        limits : [5,10,15,20],
        defaultToolbar: ['filter','print'],
        limit : 5,
        id : "roomListTable",
        cols : [ [
            {field: 'id', title: 'ID', minWidth:80, align:"center"},
            {field: 'name', title: '酒店名称', minWidth:100, align:"center"},
            {field: 'type', title: '酒店房型', minWidth:100, align:"center",templet: function(d){
            	var type = d.type;
            	var tname = "";
            	if(type == 1){
            		tname = "标准间";
            	}else if(type ==2){
            		tname = "豪华间";
            	}else{
            		tname = "总统套房";
            	}
                return tname;
            }},
            {field: 'price', title: '房间价格', minWidth:100, align:"center"},
            {field: 'address', title: '酒店地址', minWidth:100, align:"center"},
            {field: 'mobile', title: '联系电话', minWidth:100, align:"center"},
            {title: '操作', minWidth:185, templet:'#roomListBar',fixed:"right",align:"center"}
        ] ]
    });

    //查询
    $("#doSearch").click(function(){
        var params=$("#searchForm").serialize();
        table.reload('roomListTable', {
            url: '/room/loadAllRoom?'+params
        });
    });
    
  //监听事件
    table.on('toolbar(roomList)', function(obj){
      switch(obj.event){
        case 'add':
          addRoom();
        break;
      };
    });
  
    var mainIndex;
  function addRoom(){
	  mainIndex = layer.open({
		  type:1,
		  title:'添加房间',
		  area:["600px","400px"],
          content : $("#dataFrmContent"),
          success : function(layero, index){
              setTimeout(function(){
                  layui.layer.tips('点击此处返回房间列表', '.layui-layer-setwin .layui-layer-close', {
                      tips: 3
                  });
              },500);
              $("#dataFrm")[0].reset();
              //加载酒店
              loadHotel();
          }
	  });
  };
  
  function loadHotel(){
	  var hotelid = $("#hotelid");
	  $.post('/hotel/loadAllHotel',function(obj){
		  hotelid.html("<option value=''>请选择酒店</option>");
      	for(var i=0;i<obj.length;i++){
      		var h=obj[i];
      		hotelid.append("<option value="+h.id+" > "+h.name+" </option> ")
      	}
      	form.render("select");
	  });
  };
  
//监听提交
  form.on('submit(doSubmit)', function(data){
      var params=$("#dataFrm").serialize();
      $.post("/room/addRoom",params,function(obj){
      	if(obj.code==200){
				layer.msg(obj.msg);
				layer.close(mainIndex);
				//刷新表格
				tableIns.reload({
					 page: {
					    curr: 1 //重新从第 1 页开始
					  }
					});
			}else{
				layer.msg(obj.msg);
			}
      })
      return false;
  });
  
  table.on('tool(roomList)', function(obj){ 
	  var data = obj.data;
	  var layEvent = obj.event; 
	  var tr = obj.tr; 
	 
	  if(layEvent === 'del'){ 
		  layer.confirm('确定要删除【'+data.name+'】酒店的房间信息吗？',{icon:3, title:'提示信息'},function(index){
              $.post("/room/deleteRoom",{
                  id : data.id  
              },function(data){
              	layer.msg(data.msg);
              //刷新表格
				tableIns.reload({
					 page: {
					    curr: 1 
					  }
					});
                  //关闭提示框
                  layer.close(index);
              })
          });
	  }
	});
});
</script>
</html>